﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
<script src="../../scripts/boot.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <input type="button" value="加载数据" onclick="loadData()" />
        <input type="button" value="保存数据" onclick="savaData()" />
    </div>
    <fieldset id="form1" style="width:680px;border:solid 1px #aaa;position:relative;">
        <legend>员工详细信息</legend>
        <div id="editForm1" style="padding:5px;">
            <input class="mini-hidden" name="id"/>
            <table style="width:100%;">
                <tr>
                    <td style="width:80px;">部门名称：</td>
                    <td style="width:150px;"><input name="dept_name" class="mini-textbox" /></td>
                    <td>ID：</td>
                    <td><input name="dept_id" class="mini-textbox"/></td>
                </tr>
            </table>
        </div>
    </fieldset>

    <div style="width:700px;margin-top:10px;">
        <div class="mini-toolbar" style="border-bottom:0;">
            <a class="mini-button" onclick="addItem()">增加</a>
            <a class="mini-button" onclick="removeItem()">删除</a>
        </div>
        <div id="employee_grid" class="mini-datagrid" style="width:100%;height:250px;" 
            url="../data/AjaxService.jsp?method=GetDepartmentEmployees" showfooter="false"
        
        >
            <div property="columns">            
                <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>                
                <div field="gender" width="100" allowSort="true" align="center" headerAlign="center">性别</div>            
                <div field="age" width="100" allowSort="true">年龄</div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">

var obj = {
    form: {
        dept_id:"123",
        dept_name:"技术部"
    },
    data:[
        {loginname:"123@qq.com",gender:"男",age:"35"},
        {loginname:"456@qq.com",gender:"女",age:"25"},
        {loginname:"789@qq.com",gender:"男",age:"32"},
        {loginname:"345@qq.com",gender:"女",age:"32"},
        {loginname:"677@qq.com",gender:"女",age:"22"},
        {loginname:"7544@qq.com",gender:"男",age:"27"},
        {loginname:"456@qq.com",gender:"女",age:"25"},
        {loginname:"789@qq.com",gender:"男",age:"32"},
        {loginname:"345@qq.com",gender:"女",age:"32"},
        {loginname:"456@qq.com",gender:"女",age:"25"},
        {loginname:"789@qq.com",gender:"男",age:"32"},
        {loginname:"345@qq.com",gender:"女",age:"32"}
    ]
}

mini.parse();
var employee_grid = mini.get("employee_grid");
var form = new mini.Form("#editForm1");

function loadData() {
    form.setData(obj.form);
    employee_grid.setData(obj.data);
}
function savaData() {
    var form = new mini.Form("form1");

    var obj = {};
    obj.form = form.getData();
    obj.data = employee_grid.getData();

    var json = mini.encode(obj);
    alert(json);
}

function addItem() {
    var newRow = { loginname: "New Row" };
    employee_grid.addRow(newRow, 0);
}

function removeItem() {
    var row = employee_grid.getSelected();
    if (row) {
        employee_grid.removeRow(row, true);
    }
}
</script>